

// 设计思路
// 1.style-loader 最终需返回一个 `js` 脚本：在脚本中创建一个 `style` 标签，将 `css` 代码赋给 `style` 标签，再将这个 `style` 标签插入 `html` 的 `head` 中。
// 2.难点是获取 `css` 代码，因为 css-loader 的返回值只能在运行时的上下文中执行，而执行 loader 是在编译阶段。换句话说，css-loader 的返回值在 style-loader 里派不上用场。
// 3.曲线救国方案：使用获取 `css` 代码的表达式，在运行时再获取 css (类似 `require('css-loader!index.css')`）。
// 4.在处理 css 的 loader 中又去调用 `inline loader` require `css` 文件，会产生循环执行 loader 的问题，所以我们需要利用 `pitch` 方法，让 style-loader 在 `pitch` 阶段返回脚本，跳过剩下的 loader，同时还需要内联前缀 `!!` 的加持。

const loaderUtils = require("loader-utils");

function loader(source) {
    console.log(this.data)
    // let script = `
    //     let style = document.createElement('style');
    //     style.innerHTML = ${JSON.stringify(source)};
    //     document.head.appendChild(style);
    //     module.exports = "";
    // `;
    // return script; 
}

/**
 * 
 * @param {*} remainingRequest 剩下未执行的    loader3+file
 * @param {*} previousRequest 之前的    loader1
 * @param {*} data  
 */
loader.pitch = function (remainingRequest,previousRequest,data) {
    data.age = 100
    console.log('remainingRequest',remainingRequest);
    console.log('previousRequest',previousRequest);
    console.log('data',data);
    /**
     * remainingRequest =  less-loader.js!index.less
     * !! 表示只要行内，不要pre post normal
     * 执行的时候先读取index.less内容，然后把内容给less-loader.js，获得到模块的导出对象module.exports
     */
    let script = `
        let style = document.createElement('style');
        style.innerHTML = require(${loaderUtils.stringifyRequest(this,"!!"+remainingRequest)});
        document.head.appendChild(style);
        module.exports = "";
    `;
    return script
}
module.exports = loader
/**
 * 整个过程loader-runner执行了2次? 
 * 第一次是先执行到style-loader，style-loader有pitch方法，并且pitch方法有返回值，后面的loader不走了，文件也不读了，直接把返回值给webpack了，第一轮的loaderrunner就结束了
 * 然后webpack拿到代码后会进行AST解析，找出里面的require,然后又要编译一次模块,又走一次loader-runner(less-loader.js!index.less)
 * 先读index.less源文件,然后结果给less-loader.js的normal,会回JS脚本，JS脚本会导出一个CSS字符串
 */

/**
 * 第二轮loaderrunner还是走 style-loader 和 less-loader 么￼
 * 如果你加了!!不走了
 */

